// 生成随机id
import { useStore } from "vuex";
import { nanoid } from "nanoid";
import { mergeAttributes, Node } from '@tiptap/core' // 导入Tiptap的核心模块，包括Node类和mergeAttributes函数
import { VueNodeViewRenderer } from '@tiptap/vue-3' // 导入用于Vue 3的Tiptap渲染器
import speak from '../TextEditComponens/speak.vue' // 导入自定义的Vue组件，用于渲染DotComponent节点
import { Plugin, PluginKey } from 'prosemirror-state';

import { getSsmlcontent } from '@/views/shotstack/MuseMixedCut/utools/index.js'

// import EditBtns from '../TextEditComponens/EditBtns.vue';

export default Node.create({ // 使用Node类的create方法创建一个新的节点扩展
    name: 'speak', // 节点的名称，用于标识这个节点
    group: 'block', // 节点所属的组，这里表示它是一个块级元素
    content: 'text* | inline*', // 节点可以包含的内容类型，这里表示可以包含任意数量的内联元素

    addProseMirrorPlugins() {
        return [
            new Plugin({
                key: new PluginKey('customNodePlugin'),
                props: {
                    handleTextInput(view, from, to, text) {
                        console.log(view, '文本文本');
                        const ssmlData = getSsmlcontent(view.state.doc.content.content[0].content.content)
                        console.log(ssmlData, '文本文本');

                        // view.state.doc.content.content
                        // console.log(from, '文本文本');
                        // console.log(to, '文本文本');
                        // console.log(from, '文本文本');

                        // return true
                        // 在这里添加你的逻辑，例如检查是否允许编辑
                        // if (!this.isEditable()) {
                        //     return false; // 阻止编辑
                        // }

                        // // 如果允许编辑，返回 true
                        // return true;
                    },
                },
            }),
        ];
    },


    parseHTML() { // 定义如何从HTML字符串中解析出这个节点
        return [
            {
                tag: 'speak', // 当遇到<speak>标签时，将其解析为这个节点
            },
            {
                tag: 'break',
            },
            {
                tag: 'CancelRead',
            },
            {
                tag: 'say-as',
            },
            {
                tag: 'phoneme',
            },
        ]
    },

    renderHTML({ node, HTMLAttributes }) { // 定义如何将节点渲染成HTML字符串
        if (node.type.name === 'break') {
            return ['break', mergeAttributes(HTMLAttributes)];
        }
        if (node.type.name === 'CancelRead') {
            return ['CancelRead', mergeAttributes(HTMLAttributes)];
        }
        if (node.type.name === 'say-as') {
            return ['say-as', mergeAttributes(HTMLAttributes)];
        }
        if (node.type.name === 'phoneme') {
            return ['phoneme', mergeAttributes(HTMLAttributes)];
        }
        return ['speak', mergeAttributes(HTMLAttributes), 0] // 返回一个数组，第一个元素是标签名，第二个是属性，第三个是索引
    },

    addNodeView() { // 定义如何渲染节点的视图VueNodeViewRendere
        return VueNodeViewRenderer(speak) // 使用VueNodeViewRenderer函数来渲染speak.vue组件作为节点的视图
    },

    addCommands() { // 定义编辑器命令，这些命令可以通过编程方式或快捷键来调用
        return {
            insertDotComponent: (text) => ({ commands }) => { // 定义一个命令，用于插入一个新的DotComponent节点
                const id = nanoid();
                text ? commands.insertContent(`<speak subId="${id}"><p>${text}</p></speak>`) : commands.insertContent(`<speak subId="${id}"><p></p></speak>`);
            },
            myDeleteSelection: (data) => ({ commands }) => {
                commands.deleteSelection()
                return true
            },
            // 此命令 用于插入停顿节点
            insertPause: (data) => ({ tr, commands }) => {
                const { $from, $to } = tr.selection
                console.log(data, '即将插入的内容');
                commands.insertContentAt($to.pos, `<${data.type} time="${data.attrs.time}" subId="${data.attrs.subId}"></${data.type}>`)
            },
            // 此命令 处理取消诵读按钮 - 转为取消诵读组件
            handleCancelRead: (data) => ({ tr, commands }) => {
                // debugger
                // debugger
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                const to = tr.mapping.map($to.pos)
                tr.delete(from, to)
                console.log(data, '即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容');
                // const htmlContent = `<CancelRead cancelReadText="${data.text}" subId="${data.subId}"><span>${data.text} </span></CancelRead>`;
                const htmlContent = `<CancelRead cancelReadText="${data.text}" subId="${data.subId}">${data.text}</CancelRead>`;
                commands.insertContentAt(from, htmlContent);
            },
            // 此命令用于将取消诵读组件转为普通文本
            handleCancelReadToText: (content) => ({ tr, commands }) => {
                commands.deleteSelection()
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                commands.insertContentAt(from, content)
                // const to = tr.mapping.map($to.pos)
                // tr.delete(from, to)
            },
            // 此命令用于处理数字读音
            setNumberPronunciation: (content) => ({ tr, commands }) => {
                // debugger
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                const to = tr.mapping.map($to.pos)
                tr.delete(from, to)
                console.log(content, '即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容即将插入的内容');
                const htmlContent = `<say-as interpret-as="${content.type}" text="${content.text}" subId="${content.subId}">${content.text}</say-as>`;
                commands.insertContentAt(from, htmlContent);
            },
            // 此命令将数字读音 转为普通文本
            setNumberPronunciationToText: (content) => ({ tr, commands }) => {
                // 删除目前的选区内容
                commands.deleteSelection()
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                // 在选区起始位置插入文本
                commands.insertContentAt(from, content)
            },
            // 此命令用于处理修改发音
            setPronounce: (data) => ({ tr, commands }) => {
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                const to = tr.mapping.map($to.pos)
                tr.delete(from, to)
                const htmlContent = `<phoneme text="${data.conten}" ph="${data.ph}" subId="${data.subId}">${data.conten}</phoneme>`;
                commands.insertContentAt(from, htmlContent);
            },
            // 此命令用于处理头部的回车换行
            handleTopEnter: (data) => ({ tr, commands, state, editor }) => {
                // debugger
                const { $from, $to } = tr.selection
                const from = tr.mapping.map($from.pos)
                const id = nanoid();
                commands.insertContentAt(from - 1, `<speak subId="${id}"><p></p></speak>`)
                // commands.insertContentAt(from - 1, `<speak subId="${id}"><p></p></speak>`)
                // 往仓库同步添加一个 subtitle
                // const store = useStore()
                // store.commit('ADD_DRAWER_SUBTITLE', { subtitle_id: id })
            },
        };
    },

    addAttributes() {
        return {
            subId: {
                default: null,
            },
            tts_id: {
                default: null,
            }
        }
    },

    // 定义键盘快捷键逻辑
    addKeyboardShortcuts() { // 定义快捷键绑定
        const that = this
        return {

        };
    },
})


